<template>
    <cl-crud :ref="setRefs('crud')" @load="onLoad">
        <el-row type="flex" align="middle">
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key />
        </el-row>

        <el-row>
            <!-- 数据表格 -->
            <cl-table :ref="setRefs('table')" v-bind="table" >
                <template #column-pics="{ scope }">
					<cl-image :size="80" :src="scope.row.pics" />
				</template>
            </cl-table>
        </el-row>

        <el-row type="flex">
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </el-row>

        <!-- 新增、编辑 -->
        <cl-upsert :ref="setRefs('upsert')" v-bind="upsert" :on-submit="onUpsertSubmit"/>
    </cl-crud>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useCool } from "/@/core";

export default defineComponent({
    setup() {
        // 功能
        const { refs, setRefs, service } = useCool();

        // 新增、编辑配置
        const upsert = reactive<Upsert>({
            items: [
                {
					label: "审核状态",
					prop: "isAudit",
					value: 0,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "待审核",
								value: 0
							},
							{
								label: "审核通过",
								value: 1
							},
							{
								label: "审核拒绝",
								value: 2
							}
						]
					}
				},
            ]
        });

        // 表格配置
        const table = reactive<Table>({
            columns: [
                {
                    type: "selection",
                    align: "center",
                    width: 60
                },
                {
                    label: "ID",
                    align: "center",
                    prop: "id"
                },
                {
                    label: "类型",
                    align: "center",
                    prop: "type",
                    formatter(row, column, cellValue) {
                        switch (cellValue) {
                            case 'media':
                                return '视频'
                            case 'faq':
                                return '问答'
                            case 'recipe':
                                return '菜谱'
                            case 'topic':
                                return '主题'
                            case 'grass':
                                return '种草'
                            case 'creation':
                                return '原创'
                            default:
                                return '其他'
                        }
                    }
                },
                {
                    label: "用户昵称",
                    align: "center",
                    prop: "nickname"
                },
                {
					label: "图集",
					prop: "pics",
					minWidth: 100
				},
                {
                    label: "标题",
                    align: "center",
                    prop: "title"
                },
                {
                    label: "内容",
                    align: "center",
                    prop: "comment",
                    showOverflowTooltip: true
                },

                {
                    label: "评论数",
                    align: "center",
                    prop: "count_comment"
                },
                {
                    label: "阅读数",
                    align: "center",
                    prop: "count_view"
                },
                {
                    label: "收藏数",
                    align: "center",
                    prop: "count_collect"
                },
                {
                    label: "点赞数",
                    align: "center",
                    prop: "count_love"
                },
                {
                    label: "审核状态",
                    align: "center",
                    prop: "is_audit",
                    dict: [
                        {
                            label: "待审核",
                            value: 0,
                            type: "info"
                        },
                        {
                            label: "已审核",
                            value: 1,
                            type: "success"
                        },
                        {
                            label: "已拒绝",
                            value: 2,
                            type: "danger"
                        }
                    ],
                },
                {
                    type: "op",
                    align: "center",
                    buttons: ["edit", "delete"]
                }
            ]
        });

        // crud 加载
        function onLoad({ ctx, app }: CrudLoad) {
            // 绑定 service
            ctx.service(service.weibo.weibo).done();
            app.refresh();
        }

        // 提交事件
		function onUpsertSubmit(_: boolean, data: any, { next, done }: any) {
			if (_) {
				next({
					id:data.id,
                    isAudit:data.isAudit
				});
			} 
		}

        return {
            refs,
            setRefs,
            upsert,
            table,
            onUpsertSubmit,
            onLoad
        };
    }
});
</script>
